<template>
  <div class="outer">
    <h1>News</h1>
  </div>
</template>

<script>
export default {
  name: "News",
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter组件内守卫,只要进入就触发", this);
    //没有this
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate组件内守卫,当前组件复用但是更新了", this);
    //this指向组件实例
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave 组件内守卫,当前路由离开", this);
    //this指向组件实例
    next();
  },
};
</script>

<style scoped>
.outer {
  width: 100%;
  height: 400px;
  background: pink;
}
</style>
